<template>
    <!-- 精选 -->
    <div class="select">
        <div class="pic">

            <ul class="ul-rec">
                <!-- <van-image-preview v-model="show" :images="images" @change="onChange">
                    <template v-slot:index>第{{ index }}页</template>
</van-image-preview> -->
                <li @click="main(0)"><img
                        src="https://img0.baidu.com/it/u=1417386806,2593124024&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422">
                    <p
                        @click="downloadImage('https://img0.baidu.com/it/u=1417386806,2593124024&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422')">
                        <img class="img download-icon" src="./img/lock.png">5金币
                    </p>
                </li>

                <li @click="main(1)"><img
                        src="https://img2.baidu.com/it/u=3594975074,1201847495&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422">
                    <p
                        @click="downloadImage('https://img2.baidu.com/it/u=3594975074,1201847495&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422')">
                        <img class="img download-icon" src="./img/lock.png">免费
                    </p>
                </li>
                <li @click="main(2)"><img
                        src="https://img1.baidu.com/it/u=1103198021,2452509420&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422">
                    <p
                        @click="downloadImage('https://img1.baidu.com/it/u=1103198021,2452509420&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422')">
                        <img class="img download-icon" src="./img/lock.png">免费
                    </p>
                </li>

            </ul>
            <ul class="ul-rec">
                <li @click="main(3)"><img
                        src="https://img2.baidu.com/it/u=4197150151,120255432&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889">
                    <p
                        @click="downloadImage('https://img2.baidu.com/it/u=4197150151,120255432&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889')">
                        <img class="img download-icon" src="./img/lock.png">10金币
                    </p>
                </li>
                <li @click="main(4)"><img
                        src="https://img1.baidu.com/it/u=2520804141,1610416680&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889">
                    <p
                        @click="downloadImage('https://img1.baidu.com/it/u=2520804141,1610416680&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889')">
                        <img class="img download-icon" src="./img/lock.png">5金币
                    </p>
                </li>
                <li @click="main(5)"><img
                        src="https://img0.baidu.com/it/u=3837455698,29898285&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889">
                    <p
                        @click="downloadImage('https://img0.baidu.com/it/u=3837455698,29898285&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889')">
                        <img class="img download-icon" src="./img/lock.png">5金币
                    </p>
                </li>
            </ul>
            <div class="box-2">
                <li><a href="https://www.jd.com/"><img src="./img/f13.webp"></a></li>
            </div>
            <ul class="ul-rec">
                <li @click="main(6)"><img
                        src="https://img0.baidu.com/it/u=1417386806,2593124024&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422">
                    <p
                        @click="downloadImage('https://img0.baidu.com/it/u=1417386806,2593124024&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422')">
                        <img class="img download-icon" src="./img/lock.png">5金币
                    </p>
                </li>

                <li @click="main(7)"><img
                        src="https://img2.baidu.com/it/u=3594975074,1201847495&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422">
                    <p
                        @click="downloadImage('https://img2.baidu.com/it/u=3594975074,1201847495&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422')">
                        <img class="img download-icon" src="./img/lock.png">免费
                    </p>
                </li>
                <li @click="main(8)"><img
                        src="https://img1.baidu.com/it/u=1103198021,2452509420&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422">
                    <p
                        @click="downloadImage('https://img1.baidu.com/it/u=1103198021,2452509420&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422')">
                        <img class="img download-icon" src="./img/lock.png">免费
                    </p>
                </li>
            </ul>
            <div class="box-2">
                <li><a href="https://www.jd.com/"><img src="./img/f13.webp"></a></li>
            </div>
            <ul class="ul-rec">
                <li @click="main(9)"><img
                        src="https://img2.baidu.com/it/u=4197150151,120255432&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889">
                    <p
                        @click="downloadImage('https://img2.baidu.com/it/u=4197150151,120255432&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889')">
                        <img class="img download-icon" src="./img/lock.png">10金币
                    </p>
                </li>
                <li @click="main(10)"><img
                        src="https://img1.baidu.com/it/u=2520804141,1610416680&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889">
                    <p
                        @click="downloadImage('https://img1.baidu.com/it/u=2520804141,1610416680&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889')">
                        <img class="img download-icon" src="./img/lock.png">5金币
                    </p>
                </li>
                <li @click="main(11)"><img
                        src="https://img0.baidu.com/it/u=3837455698,29898285&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889">
                    <p
                        @click="downloadImage('https://img0.baidu.com/it/u=3837455698,29898285&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889')">
                        <img class="img download-icon" src="./img/lock.png">5金币
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<style lang="less" scoped>
@import '../../common/less/varible.less';

.select {
    height: 1410px;
    font-family: @fontfamily;
    // background-color: rgba(248, 219, 222, .4);
}

.pic {
    width: 100%;
}

.ul-rec {
    list-style: none;
    width: 96%;
    height: 230px;
    display: flex;
    justify-content: space-around;
    margin-left: 15px;
}

li {
    float: left;
    position: relative;
    margin-top: 10px;
}

ul li img {
    width: 88%;
    border-radius: 10px;
    border: 2px solid white;
}

.box-2 {
    height: 200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.box-2 img {
    height: 180px;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 120px;
    height: 120px;

}

p {
    position: absolute;
    bottom: 8%;
    left: 2px;
    text-align: right;
    line-height: 30px;
    padding-right: 20px;

    font-size: 20px;
    font-weight: bold;
    height: 30px;
    width: 85%;
    background-color: #ede9e9;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;

    .img {
        width: 20%;
        border: transparent;
        position: absolute;
        left: 10px;
        top: 5px;
    }
}
</style>

<script>
import Vue from 'vue';
import { ImagePreview } from 'vant';
export default {
    data() {
        return {
            images: [],
            show: "",
            downloadFile: '',
            isSaved: false,
            currentSelectedImageIndex: 0, // 图片索引
        };
    },
    mounted() {
        // 检查每张图片的下载状态并设置按钮样式
        const ulRecElements = document.querySelectorAll('.ul-rec li');
        ulRecElements.forEach(li => {
            const imgSrc = li.querySelector('img').src;
            const imageKey = imgSrc;
            const isDownloaded = localStorage.getItem(imageKey);
            if (isDownloaded === 'downloaded') {
                const imgElement = li.querySelector('.img');
                if (imgElement) {
                    imgElement.src = 'https://img1.baidu.com/it/u=852733587,764054491&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'; // 设置已下载的图片样式
                }
            }
        });
        this.isSaved = localStorage.getItem('dataSaved') === 'true';
    },
    watch: {
        isSaved(newValue) {
            localStorage.setItem('dataSaved', newValue);
        }
    },
    created() {
        this.isSaved = localStorage.getItem('dataSaved') === 'true';
    },
    methods: {
        showDownloadConfirmation(url) {
            return new Promise((resolve, reject) => {
                this.$dialog.confirm({
                    title: '确认下载',
                    message: '确定要下载此图片吗？',
                })
                    .then(() => {
                        resolve();
                    })
                    .catch(() => {
                        reject();
                    });
            });
        },

        async downloadImage(url) {
            try {
                await this.showDownloadConfirmation(url);
                // 使用fetch API获取图片  
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }

                // 将响应体转换为 Blob 对象  
                const blob = await response.blob();

                // 创建一个临时的 a 标签用于下载  
                const link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download', 'downloaded_image.jpg'); // 可以指定下载的文件名  

                // 触发点击  
                document.body.appendChild(link);
                link.click();

                document.body.removeChild(link);
                URL.revokeObjectURL(link.href); // 释放 URL 对象  

                const imageKey = url;
                localStorage.setItem(imageKey, 'downloaded');
            } catch (error) {
                console.error('There was a problem with your fetch operation:', error);
            }
        },
        saveData() {
            // 假设要保存的数据为 'myData'
            const myData = { key: 'value' };
            // 将数据转换为JSON字符串并保存
            localStorage.setItem('myData', JSON.stringify(myData));
            // 更新isSaved状态
            this.isSaved = true;
            // 也可以将保存状态保存到localStorage，以便页面刷新后能恢复
            localStorage.setItem('dataSaved', 'true');
        },
        main(index) {
            this.currentSelectedImageIndex = index;
            ImagePreview({
                images: [
                    'https://img0.baidu.com/it/u=1417386806,2593124024&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
                    'https://img2.baidu.com/it/u=3594975074,1201847495&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422',
                    'https://img1.baidu.com/it/u=1103198021,2452509420&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
                    'https://img2.baidu.com/it/u=4197150151,120255432&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
                    'https://img1.baidu.com/it/u=2520804141,1610416680&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
                    'https://img0.baidu.com/it/u=3837455698,29898285&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
                    'https://img0.baidu.com/it/u=1417386806,2593124024&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
                    'https://img2.baidu.com/it/u=3594975074,1201847495&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422',
                    'https://img1.baidu.com/it/u=1103198021,2452509420&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
                    'https://img2.baidu.com/it/u=4197150151,120255432&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
                    'https://img1.baidu.com/it/u=2520804141,1610416680&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
                    'https://img0.baidu.com/it/u=3837455698,29898285&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
                ],
                startPosition:this.currentSelectedImageIndex,
                closeable: true,
            })
        }
    }
};
</script>